<template>
  <div class="table-page">
    <div class="table-page-hd">
      <!-- 父级页面 -->
      <span
        v-if="headerBtnConfig.parent"
        @click="headerBtnConfig.parent?.handle"
      >
        {{ headerBtnConfig.parent.label }}
      </span>
      <!-- 当前页面名 -->
      <span class="current-page">
        {{ headerBtnConfig.pageName }}
      </span>
      <!-- 新增按钮 -->
      <span
        v-if="headerBtnConfig.add"
        @click="headerBtnConfig.add?.handle"
        v-auth="headerBtnConfig.add?.auth"
      >
        新增
      </span>
      <!-- 批量删除按钮 -->
      <span
        v-if="headerBtnConfig.batchDel"
        @click="headerBtnConfig.batchDel?.handle(selectedRow)"
        class="lv1-del"
        >批量删除
      </span>
    </div>
    <slot>
    </slot>
    <!-- 表单 -->
    <!-- <BaseForm
      v-model="searchForm"
      :form-config="formConfig"
      :formRules="formRules">
    </BaseForm> -->
  </div>
</template>

<script setup>
import SearchForm from '@/components/SearchForm'
import BaseForm from '@/components/BaseForm'
import { reactive } from 'vue'
const props = defineProps({
  headerBtnConfig: {},
  formParams: {
    type: Object,
    detault: () => {}
  },
  formConfig: {
    type: Array,
    default: () => [],
  },
  formRules: {
    type: Object,
    detault: () => {}
  },
  // columns: {
  //   type: Array,
  //   default: () => [],
  // },
  // getDataMethod: {
  //   type: Function,
  //   default: () => {},
  // },
  // showSelect: {
  //   type: Boolean,
  //   default: false,
  // },
  // showSearchForm: {
  //   type: Boolean,
  //   default: true,
  // }, // 是否显示搜索表单
  // tableHeight: {
  //   type: String,
  //   default: '',
  // },
  // // 是否自动初始化加载列表
  // isInitList: {
  //   type: Boolean,
  //   default: true,
  // },
  // // 表格列表查询默认参数
  // listParams: {
  //   type: Object,
  //   default: () => ({}),
  // },
  // searchFormBtn: {
  //   type: Array,
  //   default: () => [],
  // },
})

let searchForm = reactive({})
watch(
  () => props.formParams,
  (newValue) => {
    searchForm = newValue
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
.table-page {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 70px 20px 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 10px rgba(131,129,129,.2);
  overflow: hidden;
  &-hd {
    width: 100%;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    background-color: #dbeff4;
    span {
      padding: 0 36px;
      display: inline-block;
      height: 100%;
      line-height: 50px;
      cursor: pointer;
    }

    .current-page {
      color: #ffffff;
      background-color: rgba(43, 158, 185, 0.8);
    }

    .batch-del {
      display: flex;
      align-items: center;
    }

    .tips {
      margin-left: 20px;
    }
  }
}

:deep(.table-container) {
  flex: 1;
  overflow: hidden;
}
</style>